<!--
 * @Author: HZH
 * @Date: 2021-09-16 14:16:01
 * @LastEditors: HZH
 * @LastEditTime: 2021-09-18 09:37:26
 * @Description: 
-->
<template>
  <div>
    <div class="home">
      <Head></Head>
      <div class="content">
        <div class="wrapper">
          <div class="swipe">
            <!-- {{swipe}} -->
            <el-carousel height="350px">
              <el-carousel-item v-for="item in swipe" :key="item.id">
                <!-- <h3 class="small">{{ item }}</h3> -->
                <img :src="item.url" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="plates">
            <!-- {{titleData}} -->
            <div class="plate" v-for="item in titleData" :key="item.id">
              <div class="header">
                <div class="title">{{item.category.name}}</div>
                <div class="more">更多&gt;&gt;</div>
              </div>
              <ul class="list" v-if="item.aritcle.length > 0">
                <li v-for="artItem in item.aritcle" :key="artItem.id">
                  {{artItem.title}}
                </li>
              </ul>
              <ul class="list" v-else>
                <li>
                  暂无数据
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>

<script>
import { get } from "../utils/request";
import Head from './components/Head.vue'
export default {
  // 使用注册组件
  components:{
    // 1.引入所需组件

    // 2.注册组件
    Head,
  },
  data() {
    return {
      // message: "hello",
      swipe: [],
      titleData:{}
    };
  },
  methods: {
    // 引入封装好的工具类
    getSwipeData() {
      get("/index/carousel/findAll").then((res) => {
        // console.log(res);
        this.swipe = res.data;
      });
    },
    gettitleData(){
      get('/index/article/findCategoryArticles').then(res => {
        // console.log(res);
        this.titleData = res.data;
      })
    }
  },
  created() {
    this.getSwipeData();
    this.gettitleData()
  },
};
</script>

<style lang="scss" scoped>

.content {
  // height: 800px;
  background-color: #ecf6f2;
  .wrapper {
    .plates {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      .plate {
        width: 31.6%;
        background-color: #fff;
        margin: 10px;
        height: 250px;
        box-sizing: border-box;

        .header {
          display: flex;
          justify-content: space-between;
          padding: 10px;
          .title {
            font-style: 18px;
            font-weight: bold;
            color: #528c38;
          }
          .more {
            color: #999;
          }
        }
        .list {
          line-height: 2em;
          // width: 200px;
          padding: 10px;
          width: 350px;
          li {
            overflow: hidden;

            white-space: nowrap;
            // text-overflow: ellipsis;
            text-overflow: ellipsis;

            cursor: pointer;
          }
        }
      }
    }
  }
}
.footer {
  height: 200px;
  background-color: #528c38;
}
</style>